<template>
	<van-nav-bar title="绑定设备" left-text="返回" left-arrow @click-left="onClickLeft" />
	<div style="margin-top: 15px;">
		<van-form @submit="handleLogin" :validate-trigger="['onChange', 'onSubmit']" required>
			<van-cell-group inset>
				<!-- 设备码 -->
				<van-field v-model="form.deviceNumber" placeholder="请输入设备码" readonly label="设备码" name="deviceNumber"
					:rules="[{ required: true, message: '请输入设备码' }]" />
				<!-- 店铺 -->
				<van-field v-model="result" is-link readonly name="picker" label="绑定店铺" placeholder="请选择店铺"
					:rules="[{ required: true, message: '请选择店铺' }]" @click="showPicker = true" />

			</van-cell-group>
			<div style="margin: 16px;">
				<van-button block type="primary" native-type="submit" round>
					绑定设备
				</van-button>
			</div>
		</van-form>
		<!-- 店铺 -->
		<van-popup v-model:show="showPicker" destroy-on-close position="bottom" safe-area-inset-bottom round>
			<van-picker title="请选择您想绑定的店铺" :columns="storecolumns" @cancel="showPicker = false"
				:model-value="storepickerValue" @confirm="storeConfirm" />
		</van-popup>
	</div>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from "vue";
	import {
		getUserid
	} from '@/utils/auth';
	import {
		showToast
	} from 'vant';
	import {
		StoresList
	} from '@/api/deviceRechargeConfig';
	import {
		bindEntity
	} from '@/api/deviceEntity';
	import {
		useRoute,
		useRouter
	} from 'vue-router';

	const router = useRouter();
	const onClickLeft = () => {
		router.replace({
			path: '/homePage',
		})
	};

	const route = useRoute();

	onMounted(() => {
		getstoreList(); //获取商家列表
		getparmas();
	});

	const form = ref({
		deviceNumber: '',
		userId: getUserid(),
		storesId: ''
	})

	const getparmas = () => {
		form.value.deviceNumber = route.params.deviceNumber;
	};

	const storecolumns = ref([]);
	const result = ref('');
	const showPicker = ref(false);
	const storepickerValue = ref([]);
	const getstoreList = async () => {
		try {
			const userId = {
				userId: getUserid()
			};
			const response = await StoresList(userId);
			const records = response.data || [];
			storecolumns.value = [
				records.map((item) => ({ // 展开原数组
					text: item.storeName,
					value: item.id,
				}))
			];
		} catch (err) {
			//console.error('获取数据失败', err);
		}
	};
	const storeConfirm = ({
		selectedValues,
		selectedOptions
	}) => {
		if(selectedValues.length > 0){
			storepickerValue.value = selectedValues;
			form.value.storesId = selectedValues[0];
			result.value = selectedOptions[0].text
		} else {
			showToast('您当前没有店铺,请先去添加店铺');
		}
		showPicker.value = false;
	};

	const handleLogin = async () => {
		try {
			const response = await bindEntity(form.value);
			if (response.status == 200) {
				showToast({
					type: 'success',
					message: '绑定成功',
					forbidClick: true,
					duration: 1000
				});
				setTimeout(() => {
					router.replace({
						path: '/homePage',
					})
				}, 1000)
			} else {
				showToast({
					type: 'fail',
					message: response.desc || '绑定失败',
					forbidClick: true,
					duration: 1000
				});
			}
		} catch (error) {
			showToast({
				type: 'fail',
				message: error.desc || '绑定失败',
				forbidClick: true,
				duration: 1000
			});
		}
	}
</script>

<style lang="scss" scoped>

</style>